<!--综合业务-换表预约-->
<template>
  <div class="meter-reservation-box">
    <PageTitle class="boxTitle" :text="title"></PageTitle>
    <div class="con-box detailContent">
      <div class="primary-tit title">请如实填写以下信息完成申请</div>
      <div>
        <tui-form ref="form">
          <tui-input label="用户编号" :required="true" :lineLeft="false" placeholder="请输入用户编号（表号）" v-model="formData.userNo"></tui-input>
          <tui-input label="联系人姓名" :required="true" :lineLeft="false" placeholder="请输入联系人姓名" v-model="formData.name"></tui-input>
          <tui-input label="服务地址" :required="true" :lineLeft="false" placeholder="请输入地址" v-model="formData.address"></tui-input>
          <tui-input label="联系电话" :required="true" :lineLeft="false" type="number" placeholder="请输入联系电话" v-model="formData.phone" maxlength="11"></tui-input>
          <view class="letterType">
            <view class="itemTit"><span style="color: red; margin-right: 3px;font-size: 15px;">*</span>预约时间</view>
            <lb-picker ref="picker1" style="margin-left: 10px;" mode="multiSelector" :list="dateList" :level="2" :columnNum="10" @confirm="pickerConfirm">
              <input class="tui-input" :required="true" :value="formData.time" placeholder-class="tui-phcolor" disabled name="cause" placeholder="请选择预约时间" maxlength="50" type="text" />
            </lb-picker>
            <tui-icon name="arrowright" size="22" color="#ccc"></tui-icon>
          </view>
          <tui-textarea label="备注信息" :borderTop="false" placeholder="请输入备注信息" v-model="formData.remarks"></tui-textarea>
          <view class="tui-btn__box">
            <tui-button height="84rpx" @click="submit" :disabled="loading" :loading="loading">提交</tui-button>
          </view>
        </tui-form>
      </div>
    </div>
    <div class="con-box tips">
      <div class="warning-tit title">温馨提示</div>
      <div>
        <p class="p">根据《中华人民共和国国家计量检定规程》以天然气为介质的燃气表使用期限一般不超过10年。为了保障用户能正常、安全地使用燃气重庆中燃对使用已超过10年的老旧燃气表安排有免费的集中更换服务。如您因小区集中换表时不在家，错过了换表，也可以在“重庆中燃”微信公众号上预约师傅另外安排时间上门换表</p>
      </div>
    </div>

    <FooterTel></FooterTel>
  </div>
</template>

<script>
import PageTitle from '../components/pageTitle.vue'
import FooterTel from '../components/footerTel.vue'
import LbPicker from '@/components/lb-picker'
import moment from 'moment';
const rules = [{
  name: "userNo",
  rule: ["required"],
  msg: ["请输入用户编号"]
},{
  name: "name",
  rule: ["required"],
  msg: ["请输入联系人姓名"]
}, {
  name: "address",
  rule: ["required"],
  msg: ["请输入地址"]
}, {
  name: "phone",
  rule: ["required", "isMobile"],
  msg: ["请输入手机号", "请输入正确的手机号"]
}, {
  name: "time",
  rule: ["required"],
  msg: ["请选择时间"]
}];
export default {
  name: 'Detail',
  components: {
    PageTitle,
    FooterTel,
    LbPicker
  },
  data () {
    return {
      title: null,
      // openid: 'oi8TY6O8cwzuaSky6VNq214MHjVs',
      formData: {
        userNo: '',
        openid: '',
        name: '',
        address: '',
        phone: '',
        start_time: '2023-08-20 09:00',
        end_time: '2023-08-20 17:00',
        remarks: '',
        time: ''
      },
      dateList: [],
      rules: rules,
      loading: false,
      openId: null,
    };
  },
  async onShow () {

  },
  async onLoad (e) {
    var vm = this;
    vm.title = e.title
  },
  created () {
  },
  methods: {
    pickerConfirm (e) {
      var vm = this;
      vm.formData.time = e.item[0].label + ' ' + e.item[1].label
      vm.formData.start_time = e.item[0].value + ' ' + '08:30:00'
      vm.formData.end_time = e.item[0].value + ' ' + '17:30:00'
      // console.log(e.item);
    },
    submit () {
      var vm = this, data = {};
      vm.getId()
      if (!vm.$refs.form) return;
      vm.$refs.form.validate(vm.formData, vm.rules).then(res => {
        vm.formData.openid = vm.openId
        data = JSON.parse(JSON.stringify(vm.formData))
        // console.log(data)
        // return
        vm.$delete(data, 'time')
        vm.loading = true
        vm.tui.request('/api/changegasmeter/add', 'post', data, false, false, true).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              icon: "success",
              title: '申请成功'
            });
            setTimeout(() => {
              vm.formData = {}
              uni.redirectTo({
                url: '/pages/index/index'
              });
              vm.loading = false
            }, 500);
          }
        }).catch((e) => { })
      }).catch(errors => {
        console.log(errors)
      })
    },
    getId () {
      var vm = this;
      vm.openId = uni.getStorageSync('openId')
      // 没有openId跳转获取code页面
      if (!vm.openId) return vm.func.goto('/pages/getCode/index')
    }
  },
  mounted () {
    var vm = this;
    vm.getId()
    // 获取当前日期
    let currentDate = moment();
    // 获取当前日期三十天后的日期
    let endDate = moment().add(30, 'days');
    let dateRange = []; // 存储日期的数组
    // 循环遍历日期范围
    while (currentDate.isSameOrBefore(endDate)) {
      // 将日期转换为字符串并存入数组
      dateRange.push(currentDate.format('YYYY-MM-DD'));
      // 增加一天
      currentDate.add(1, 'days');
    }
    // 将日期数组合并成一个字符串
    let dateString = dateRange.join(',');
    let list = [], hour = [{
      label: '08:30-17:30',
      value: '08:30-17:30'
    }]
    for (let i = 0; i < dateRange.length; i++) {
      list.push({
        label: dateRange[i],
        value: dateRange[i],
        children: hour
      })
    }
    vm.dateList = list
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/module.scss";
.meter-reservation-box {
  padding-bottom: 20px;
  .boxTitle {
    margin: 10px 14px;
  }
  .detailContent,
  .tips {
    p.p {
      padding: 4px 0;
    }
    padding: 0 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 22px;
    overflow: hidden;
    .title {
      width: 100%;
      height: 30px;
      padding-left: 14px;
      line-height: 30px;
      font-size: 17px;
      font-weight: bold;
      color: #222;
      box-sizing: border-box;
      margin: 10px 0;
    }
    :v-deep .tui-textarea__wrap,
    :v-deep .tui-input__wrap {
      padding: 12px 0 12px 8px !important;
    }
    :v-deep .tui-placeholder,
    :v-deep .tui-textarea__label,
    :v-deep .tui-textarea__self,
    :v-deep .uni-input-placeholder,
    :v-deep .tui-input__label,
    :v-deep.tui-input__self {
      font-size: 15px !important;
      uni-text,
      text {
        font-size: 15px !important;
      }
    }
    :v-deep.tui-textarea__wrap {
      align-items: flex-start !important;
    }
    :v-deep .tui-input__required {
      left: 0;
      top: 45%;
    }
    .tui-btn__box {
      padding-top: 30px;
    }
  }
  :v-deep .tui-form__errmsg {
    left: 14px;
    right: 14px;
  }

  .letterType {
    display: flex;
    align-items: baseline;
    padding: 12px 0 12px 8px;
    border-bottom: 1px solid #f2f2f2;
    .itemTit {
      min-width: 77px;
      padding-right: 6px;
      font-size: 18px;
      color: #333;
      position: relative;
      white-space: nowrap; /* 核心：禁止自动换行 */
      //&::before {
      //  position: absolute;
      //  content: "*";
      //  left: -4px;
      //  top: -2px;
      //  color: #eb0909;
      //}
    }
    .lb-picker {
      width: 100%;
      z-index: 1;
      .tui-input {
        width: 70%;
      }
    }
    :v-deep .uni-input-input {
      font-size: 15px;
    }
    .tui-icon {
      position: absolute;
      right: 0px;
      z-index: 0;
    }
  }
}
</style>
